<template>
    <div>
        <van-nav-bar
                style="background-color:rgba(0,0,0,0);"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft">
                <span slot="title" style="color: black">
                    {{movieTheatreShow.movieTheatreName}}
                </span>
        </van-nav-bar>

        <table class="buju" id="table">
            <tr v-for="row in 8">
                <td v-for="col in 8">
                    <div :value="row+'-'+col"
                         :class="buySeat.toString().indexOf(row+'-'+col)==-1?'noSelectedSeat':'selectedSeat noClick'"
                         @click="selectSeatClick($event)" :id="row+'-'+col"></div>
                    <!--                    <div :value="row+'-'+col" class="noSelectedSeat" @click="selectSeatClick($event)" :id="row+'-'+col"></div>-->
                </td>
            </tr>
        </table>

        <div style="margin-left: 10%">
            <h5>{{movieVo.name}}</h5>
            <p style="color: gray">{{movieTheatreShow.sessionTime}} {{movieTheatreShow.languageVersion}}</p>
        </div>

        <div class="seatCss">
            <div v-for="(seat,index) in selectSeat"
                 style="width: 60px;height:40px;background-color: gainsboro;margin-left: 5px ">
                <span>{{seat.toString().replace("-","排")+'座'}}</span><br/>
                <span>{{movieTheatreShow.price}}     </span>
                <span @click="deleteSeat(index)">×</span>
            </div>
        </div>

        <van-button
                style="position: fixed;bottom: 0px"
                type="primary"
                color="red"
                round
                @click="buyTicket"
                size="large">
            {{buySeatBtnText}}
        </van-button>
    </div>
</template>

<script>
    import orderApi from "../../api/order";
    import {Toast} from "vant"

    export default {
        name: "SelectionSeat",
        data() {
            return {
                movieId: "",     //电影id
                movieShowId: "", //影院放映id
                buySeat: [],      //已购买座位
                movieTheatreShow: null,  //影院放映数据
                movieVo: null,           //电影数据
                buySeatBtnText: "请先选座",
                selectSeat: [],
                allPrice: 0,
                submitOrderObj: {
                    token: "",
                    endDate: "",
                    movieTheatreShowId: "",
                    seat: "",
                    price: "",
                    movieId: ""
                }

            }
        },
        methods: {
            deleteSeat(index) {
                //删除座位
                let seat = this.selectSeat[index];
                let className = document.getElementById(seat).className
                let el = document.getElementById(seat)
                if (className == "selectedSeat") {
                    // 1.改变样式
                    el.className = "noSelectedSeat"
                }

                //删除面包屑
                this.selectSeat.splice(index, index + 1)
                if (this.selectSeat.length != 0) {
                    this.allPrice = this.movieTheatreShow.price * this.selectSeat.length
                    this.buySeatBtnText = this.allPrice + "元 确认选座"
                } else {
                    this.buySeatBtnText = "请先选座"
                }
            },
            buyTicket() {
                //封装订单数据
                this.submitOrderObj.endDate = this.movieTheatreShow.endDate
                this.submitOrderObj.movieTheatreShowId = this.movieTheatreShow.id
                this.submitOrderObj.seat = this.selectSeat.toString()
                this.submitOrderObj.price = this.allPrice
                this.submitOrderObj.movieId = this.movieTheatreShow.movieId
                orderApi.submitOrder(this.submitOrderObj).then(response => {
                    console.log(response);
                }).catch(error => {
                    Toast.fail(error.data.message)
                })

            },
            selectSeatClick(el) {
                let className = el.currentTarget.className
                let seat = el.target.getAttribute("value")

                if (className == "noSelectedSeat") {
                    //选中座位
                    // 1.改变按钮文本
                    this.selectSeat.push(seat)
                    // 2.改变样式
                    el.currentTarget.className = "selectedSeat"
                } else {
                    //取消座位
                    el.currentTarget.className = "noSelectedSeat"
                    //删除面包屑
                    for (let i = 0; i < this.selectSeat.length; i++) {
                        if (this.selectSeat[i] == seat) {
                            this.deleteSeat(i)
                        }
                    }

                }
                if (this.selectSeat.length != 0) {
                    this.allPrice = this.movieTheatreShow.price * this.selectSeat.length
                    this.buySeatBtnText = this.allPrice + "元 确认选座"
                } else {
                    this.buySeatBtnText = "请先选座"
                }

            },
            onClickLeft() {
                this.$router.go(-1)
            },
        },
        mounted() {
            this.movieId = this.$route.params.movieId
            this.movieShowId = this.$route.params.movieShowId
            orderApi.selectionSeatPageData(this.movieId, this.movieShowId).then(response => {
                //初始化数据
                this.buySeat = response.buySeat
                this.movieTheatreShow = response.movieTheatreShow
                this.movieVo = response.movieVo
                this.submitOrderObj.token = response.token
                console.log(response);

            }).catch(error => {
                Toast.fail(error.data.message)
            })

        }
    }
</script>

<style scoped>
    .selectedSeat {
        background-color: red;
        height: 30px;
        width: 30px
    }

    .noSelectedSeat {
        background-color: white;
        height: 30px;
        width: 30px
    }

    .noClick {
        cursor: not-allowed;
        pointer-events: none;
    }

    .seatCss {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .buju {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
</style>